<script setup>
import { doGet, doPost } from '../http/httpRequest';
import { onMounted, ref } from 'vue';

let userList = ref([{}])

function getData() {
  doGet("/api/users", {})
    .then((response) => {
      // 处理成功情况
      console.log(response);
      userList.value = response.data.data
    })
    .catch((error) => {
      // 处理错误情况
      console.log(error);
    })
    .finally(() => {
      // 总是会执行
    });
}

function download(id) {
  let iframe = document.createElement("iframe")
  iframe.src = "http://localhost:8080" + "/api/download/" + id
  document.body.appendChild(iframe)
}

// 页面挂载时执行getData获取用户列表
onMounted(() => {
  getData()
})
</script>

<template>
  <el-table :data="userList" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="nick" label="昵称" width="180" />
    <el-table-column label="密码" width="180">
      <template #default="scope">
        ******
        <!-- scope可以拿到当前行的数据
          {{ scope.row.id }} 
        -->
      </template>
    </el-table-column>
    <el-table-column prop="email" label="邮箱" width="180" />
    <el-table-column prop="address" label="住址" width="180" />
    <el-table-column prop="createTime" label="创建时间" width="180" />
    <el-table-column prop="updateTime" label="更新时间" width="180" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <a href="javascript:void(0)" @click="download(scope.row.id)">下载</a> <a :href="'/edit/' + scope.row.id">编辑</a> <a
          href="#">删除</a>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>